<template>
	<view class="">
		<h4 style="margin-left: 15px; width: 200px;">{{ $t('textContent.Parameteradjustment') }}</h4>
		<view class="" style="width: 100%; display: flex; ">
			<view class="left" style="width: 55%;">
				<view v-for="(item, index) in $t('curve')" :key="index">
					<view class="" style="display: flex;justify-items: center;align-items: center;">
						<span>{{ item.name }}</span>
					</view>
					<view class="slider-container">
						<image src="../../static/jian.png" mode="" style="width: 15px; height: 15px;"
							@click="minusValue(item,index,'curve')"></image>
						<u-slider v-model="item.value" :min="item.min" :max="item.max" :step="item.step"
							showValue="true" style="flex: 1;"></u-slider>
						<image src="../../static/add.png" mode="" style="width: 15px; height: 15px;"
							@click="addValue(item,index,'curve')"></image>
					</view>
				</view>
			</view>
			<view class="" style="width: 5%;">
			</view>
			<view class="middle" style="width: 40%;">
				<span>{{ $t('textContent.Color') }}</span>
				<renderjs-color-picker :pickerWidth="200" :showHalo="true" @change="curveColorChange"
					:pointerSize="10"></renderjs-color-picker>
				<span>{{ $t('textContent.lrReverse') }}</span>
				<u-switch v-model="lrReverse"></u-switch>

				<view class="common">
					<span>{{ $t('textContent.isReverse') }}</span>
					<u-switch v-model="isReverse"></u-switch>
					<span>{{ $t('textContent.showLogo') }}</span>
					<u-switch v-model="showLogo"></u-switch>
					<span>{{ $t('textContent.timing') }}</span>
					<view class="container">
						<text class="timer">{{ formatTime }}</text>
						<view class="buttons" style="display: flex;">
							<button @click="startTimer('start')">Start</button>
							<button @click="pauseTimer('stop')">Stop</button>
							<button @click="resetTimer('reset')">Reset</button>
							<button @click="clearTimer('clear')">Clear</button>
						</view>
						<u-alert title="由于信号延迟，平板上和投影上的计时有大约0.02秒之差" type="warning"></u-alert>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
	export default {
		data() {
			return {
				timer: null,
				isBlack: false,
				LineBlack: false,
				isReverse: false,
				random_status: false,
				color: '(255,136,127)',
				showLogo: false,
				random_status: false,
				timingValue: 'clear',
				lrReverse: false,
				elapsed: 0, // 以毫秒为单位
			}
		},
		computed: {

			curve() {
				return this.$t('curve');
			},
			formatTime() {
				const hours = Math.floor(this.elapsed / 3600000);
				const minutes = Math.floor((this.elapsed % 3600000) / 60000);
				const seconds = Math.floor((this.elapsed % 60000) / 1000);
				const milliseconds = Math.floor((this.elapsed % 1000) / 10); // 保留两位毫秒
				return `${this.pad(minutes)}:${this.pad(seconds)}:${this.pad(milliseconds)}`;
			},
		},
		methods: {
			curveColorChange(res) {
				const r = res.rgb.r;
				const g = res.rgb.g;
				const b = res.rgb.b;
				const color = `(${r},${g},${b})`;
				this.color = color;
			},

			addValue(item, index, name) {
				if (item.value < item.max) {
					item.value += item.step
					this.curve[index] = item
				}
			},
			minusValue(item, index, name) {
				if (item.value > item.max) {
					item.value -= item.step
					this.curve[index] = item
				}
			},
			send(is_generating, generate_exit) {
				var sendData = {
					id: 5,
					id_check: 5,
					is_generating: is_generating,
					generate_exit: generate_exit,
					speed: this.curve[0].value,
					color: this.color,
					lr_reverse: this.lrReverse,
					is_reverse: this.isReverse,
					timing: this.timingValue,
					is_black: this.isBlack,
					show_logo: this.showLogo
				}
				this.$emit('send', sendData)
			},
			pad(num) {
				return num < 10 ? '0' + num : num;
			},
			startTimer(timing) {
				this.changeTiming(timing)
				if (this.isRunning) return;
				this.isRunning = true;
				this.timer = setInterval(() => {
					this.elapsed += 10; // 每次增加10毫秒
				}, 10);
			},
			pauseTimer(timing) {
				this.changeTiming(timing)
				this.isRunning = false;
				clearInterval(this.timer);
				this.timer = null;
			},
			async resetTimer(timing) {
				this.changeTiming(timing)
				this.isRunning = false;
				clearInterval(this.timer);
				await sleep(50); // 一行代码暂停 0.5 秒
				this.timer = null;
				this.elapsed = 0;
				// this.startTimer(timing)
			},
			async clearTimer(timing) {
				this.changeTiming(timing)
				clearInterval(this.timer);
				await sleep(50);
				this.isRunning = false;
				this.timer = null;
				this.elapsed = 0;
			},
			changeTiming(timing) {
				this.timingValue = timing
				this.send(true, false)
			},
		},
		watch: {
			curve: {
				handler(newVal, oldVal) {
					this.send(true, false)
				},
				deep: true
			},
			double_l(newVal, oldVal) {
				this.send(true, false)
			},
			LineBlack(newVal, oldVal) {
				this.send(true, false)
			},
			isBlack(newVal, oldVal) {
				this.send(true, false)
			},
			shape_generate_X_interval: {
				handler(newVal, oldVal) {
					this.send(true, false)
				},
				deep: true
			},

			random_status(newVal, oldVal) {
				this.send(true, false)
			},
			color(newVal, oldVal) {
				this.send(true, false)
			},
			isReverse(newVal, oldVal) {
				this.send(true, false)
			},
			lrReverse(newVal, oldVal) {
				this.send(true, false)
			},
			isFlipped(newVal, oldVal) {
				this.send(true, false)
			},
			showLogo(newVal, oldVal) {
				this.send(true, false)
			},
			bgDisplay(newVal, oldVal) {
				this.send(true, false)
			},
			showScore(newVal, oldVal) {
				this.send(true, false)
			},
			showArUco(newVal, oldVal) {
				this.send(true, false)
			},
		}
	}
</script>


<style>
</style>